<nz-spin *ngIf="isLoading" class="modal-spin"></nz-spin>
<form nz-form *ngIf="!isLoading" [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired nzFor="name">姓名</nz-form-label>
    <nz-form-control [nzSpan]="20" [nzValidateStatus]="validateForm.controls['name']">
      <input type="text" nz-input formControlName="name" placeholder="姓名" readonly>
      <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').hasError('required')">请输入姓名</nz-form-explain>
      <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').hasError('maxlength')">不能超过30个字</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired nzFor="phone">手机号</nz-form-label>
    <nz-form-control [nzSpan]="20" [nzValidateStatus]="validateForm.controls['phone']">
      <input type="text" nz-input formControlName="phone" placeholder="手机号,请注意手机号即为其初始密码" readonly>
      <nz-form-explain *ngIf="validateForm.get('phone').dirty && validateForm.get('phone').hasError('required')">请输入手机号</nz-form-explain>
      <nz-form-explain *ngIf="validateForm.get('phone').dirty && validateForm.get('phone').hasError('mobileValidate')">手机号码格式不正确</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired nzFor="districtId">运营中心</nz-form-label>
    <nz-form-control [nzSpan]="20" [nzValidateStatus]="validateForm.controls['districtId']">
      <nz-select formControlName="districtId" [nzPlaceHolder]="'所属运营中心'" (ngModelChange)="filterParentOptions()" nzDisabled>
        <nz-option
          *ngFor="let option of districtOption"
          [nzLabel]="option.name"
          [nzValue]="option.id">
        </nz-option>
      </nz-select>
      <nz-form-explain *ngIf="validateForm.get('districtId').dirty && validateForm.get('districtId').hasError('required')">请选择运营中心</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired nzFor="levelId">渠道级别</nz-form-label>
    <nz-form-control [nzSpan]="20" [nzValidateStatus]="validateForm.controls['levelId']">
      <nz-select formControlName="levelId" [nzPlaceHolder]="'渠道级别'" nzDisabled>
        <nz-option
          *ngFor="let option of levelOptions"
          [nzLabel]="option.name"
          [nzValue]="option.id">
        </nz-option>
      </nz-select>
      <nz-form-explain *ngIf="validateForm.get('levelId').dirty && validateForm.get('levelId').hasError('required')">请选择渠道级别</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzFor="cityArea">独代区域</nz-form-label>
    <nz-form-control [nzSpan]="20" [nzValidateStatus]="validateForm.controls['cityArea']">
      <nz-cascader [nzPlaceHolder]="'请选择独代区域'"
        formControlName="cityArea"
        nzChangeOnSelect
        [nzOptions]="cityOptions"
        [nzLabelProperty]="'name'"
        [nzValueProperty]="'name'"
        (ngModelChange)="onChanges($event)">
      </nz-cascader>
      <nz-form-extra style="color: orange;">
        温馨提示： 市级代理可选独代区域为市级或区县级，<br/>
        区级代理独代区域只能为区县级
      </nz-form-extra>
      <nz-form-explain *ngIf="validateForm.get('cityArea').dirty && validateForm.get('cityArea').hasError('required')">请选择独代区域</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <div class="modal-footer">
    <button nz-button type="button" (click)="close()">关闭</button>
    <button nz-button type="submit" [nzType]="'primary'" >保存</button>
  </div>
</form>
